import React, { useEffect, useState } from 'react'
import styles from '@/utils/table.less';
import {
  Card,
  Table
} from 'antd'
import { ColumnProps } from 'antd/lib/table';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { ConnectState } from '@/models/connect'
import { connect } from 'dva';
import { DeviceAepLogs } from './data';
import apis from '@/services';
import moment from 'moment';
import encodeQueryParam from '@/utils/encodeParam';

interface Props {
  match: any
}

interface State {
  loading: boolean;
  searchParam: any;
}

const DeviceAEPLogsPage: React.FC<Props> = props => {
  const columns: ColumnProps<DeviceAepLogs>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      ellipsis: true
    },
    {
      title: '日志内容',
      dataIndex: 'content',
      ellipsis: true,
    },
    {
      title: '日志来源',
      dataIndex: 'sourceType',
    },
    {
      title: '发生时间',
      dataIndex: 'alarmTime',
      width: '200px',
      render: (text: any) => (text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '/'),
    },
  ]

  const initState: State = {
    loading: true,
    searchParam: {
      pageSize: 10,
      terms: {
        deviceId: props.match.params.id
      }
    }
  }

  const [searchParam, setSearchParam] = useState(initState.searchParam)
  const [loading, setLoading] = useState(initState.loading)
  const [result, setResult] = useState<any>({})

  const handleSearch = (params?: any) => {
    setSearchParam(params);
    apis.deviceAep.logs(encodeQueryParam(params)).then(response => {
      if(response.status == 200) {
        setLoading(false)
        setResult(response.result)
      }
    })
  };

  const onTableChange = (
    pagination: any,
  ) => {
    handleSearch({
      ...searchParam,
      pageIndex: Number(pagination.current) - 1,
      pageSize: pagination.pageSize,
    });
  };

  useEffect(() => {
    handleSearch(searchParam)
  }, [])
  return (
    <PageHeaderWrapper title="设备日志">
      <Card bordered={false}>
        <div className={styles.tableList}>
          <div className={styles.StandardTable}>
            <Table
              loading={loading}
              columns={columns}
              dataSource={result.data}
              rowKey="id"
              onChange={onTableChange}
              pagination={{
                current: result.pageIndex + 1,
                total: result.total,
                pageSize: result.pageSize,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '50', '100'],
                showTotal: (total: number) =>
                  `共 ${total} 条记录 第  ${result.pageIndex + 1}/${Math.ceil(
                    result.total / result.pageSize,
                  )}页`,
              }}
            ></Table>
          </div>
        </div>
      </Card>
    </PageHeaderWrapper>
  )
}

export default connect(({ deviceInstance, loading }: ConnectState) => ({
  // deviceInstance,
  // loading: loading.models.deviceInstance,
}))(DeviceAEPLogsPage);
